<template>
  <div class="right-content">
    <!-- 将右侧区域分为三个部分 -->
    <div class="right-item">
      <RightTop />
    </div>
    <div class="right-item">
      <RightCenter />
    </div>
    <div class="right-item">
      <RightBottom />
    </div>
  </div>
</template>

<script>
import RightTop from "@/views/right/RightTop.vue"
import RightCenter from "@/views/right/RightCenter.vue"
import RightBottom from "@/views/right/RightBottom.vue"

export default {
  name: 'Right',
  components: {
    RightCenter,
    RightTop,
    RightBottom
  }
}
</script>

<style scoped>
.right-content {
  width: 100%;
  height: 100%;
  display: flex;
  flex-direction: column;
  gap: 0;
}

.right-item {
  flex: 1;
  width: 100%;
  height: 33.33%;
  padding: 0;
  margin: 0;
}
</style>